<template>
  <div id="bgimg">
    <a-form :form="form" id="forms">
    <a-form-item
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      label="用户名"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [
            { required: true, message: '请填写用户名' },
            {
              pattern:/^[a-zA-Z][a-zA-Z0-9]{2,15}$/,
              message: '用户名：字母开头，字母、数字组成，3~16位'
            }
            ] },
        ]"
      />
    </a-form-item>
    <a-form-item
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      label="密码"
    >
      <a-input-password
        v-decorator="[
          'password',
          { rules: [
            { required: true, message: '请输入密码' },
            {
              pattern: /^[a-zA-Z0-9]{6,12}$/,
              message: '密码：数字、字母组成，6~12位'
            }
            ] },
        ]"
      />
    </a-form-item>

    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8, offset: 4 }">
      <a-button type="primary" @click="submit">
        登录
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
import { doLogin } from 'api'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      token: '',
      role: '',
      userInfo: {}
    }
  },
  methods: {
    submit () {
      this.form.validateFields(err => {
        if (!err) {
          // console.log(this.form.getFieldsValue())
          doLogin(this.params).then(res => {
            if (res.data.code === 200) {
              // 将信息存储在本地
              localStorage.setItem('token', res.data.data.token)
              localStorage.setItem('role', res.data.data.role)
              localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
              this.set_userInfo(res.data.data.userInfo)
              // 登录成功后就重定向到原来的页面
              if (this.$route.query.from) {
                this.$router.push(this.$route.query.from)
              } else {
                this.$router.push('/admin/dashBoard')
              }
            }
          })
        }
      })
      // this.form.getFieldsValue().validator(valid => {

      // })
    },
    handleChange (e) {
      this.checkNick = e.target.checked
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true })
      })
    },
    ...mapMutations('usere', ['set_userInfo'])
  }
  /* computed: {
    ...mapState({
      usere: state => JSON.parse(JSON.stringify(state.userInfo))
    })
  } */
}
</script>

<style lang="scss" scoped>
#bgimg{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  padding: 0;
  border: 0;
  background: url(../../../public/img/login.jpg) no-repeat ;
  background-size: 100%;
}

#forms{
  width: 28%;
  background-color: rgba(218, 217, 223, 0.3);
  margin-top: 20%;
  margin-right: 4%;
  margin-left: 70%;

}
</style>
